import React from 'react';
import { Skeleton as AntdSkeleton } from 'antd';
import type { SkeletonProps as AntdSkeletonProps } from 'antd';
import { createStyles } from 'antd-style';

export interface SkeletonProps extends AntdSkeletonProps {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
}

const useStyles = createStyles(({ token, css }) => ({
  skeleton: css`
    .ant-skeleton-content {
      padding: ${token.padding}px;
    }
  `,
}));

const SkeletonComponent: React.FC<SkeletonProps> = ({ customClassName, className, ...restProps }) => {
  const { styles, cx } = useStyles();
  
  const skeletonClassName = cx(
    className,
    customClassName,
    styles.skeleton
  );

  return <AntdSkeleton className={skeletonClassName} {...restProps} />;
};

const Skeleton = Object.assign(SkeletonComponent, {
  Button: AntdSkeleton.Button,
  Avatar: AntdSkeleton.Avatar,
  Input: AntdSkeleton.Input,
  Image: AntdSkeleton.Image,
  Node: AntdSkeleton.Node,
});

export { Skeleton };
export default Skeleton;

